import { ExtensionCategory, Graph, HoverActivate, idOf, register } from '@antv/g6';
import { ReactNode } from '@antv/g6-extension-react';
import { useRequest } from 'alova/client';
import { useRef } from 'react';
import { useEffect } from 'react';
import { Http } from '../../Utils/Api';
import { Flex, Typography } from 'antd';
const { Text } = Typography;


class HoverElement extends HoverActivate {
    getActiveIds(event) {
        const { model, graph } = this.context;
        const { targetType, target } = event;
        const targetId = target.id;
        const ids = [targetId];
        if (targetType === 'edge') {
            const edge = model.getEdgeDatum(targetId);
            ids.push(edge.source, edge.target);
        } else if (targetType === 'node') {
            ids.push(...model.getRelatedEdgesData(targetId).map(idOf));
        }
        graph.frontElement(ids)
        return ids
    }
}

register(ExtensionCategory.NODE, 'react', ReactNode);
register(ExtensionCategory.BEHAVIOR, 'hover-element', HoverElement);

const Node = ({ data }) => {
    const style = {
        width: '100%',
        height: '100%',
        cursor: 'pointer',
        'background': '#305bc7',
        border: `3px solid #305bc7`,
        borderRadius: 16,
    }
    return (
        <Flex style={style} align="center" justify="center">
            <Flex vertical style={{ padding: '8px 16px', textAlign: 'center' }} align="center" justify="center">
                <Text style={{ color: '#fff', fontWeight: 600, fontSize: 24, lineHeight: '24px' }}>{data.text}</Text>
            </Flex>
        </Flex>
    )
}


const GraphCharts = () => {
    const ChartsBox = useRef()
    const { send } = useRequest(data => Http(data), { immediate: false })
    useEffect(() => {
        if (ChartsBox.current) {
            send({ url: 'getOrganizationTree' }).then(res => {
                const graph = new Graph({
                    container: ChartsBox.current,
                    data: res.data,
                    autoFit: 'view',
                    node: {
                        type: 'react',
                        style: (d) => {
                            const style = { component: <Node data={d} />, ports: [{ placement: 'top' }, { placement: 'bottom' }] }
                            const size = { 'pre-inspection': [240, 120], problem: [200, 120], inspection: [330, 100], solution: [200, 120] }[d.data.type] || [200, 80]
                            Object.assign(style, { size, dx: -size[0] / 2, dy: -size[1] / 2 })
                            return style;
                        },
                        state: {
                            active: { halo: false },
                            selected: { halo: false },
                        },
                    },
                    edge: {
                        type: 'polyline',
                        style: {
                            lineWidth: 3,
                            radius: 20,
                            stroke: '#8b9baf',
                            endArrow: true,
                            labelText: (d) => d.text,
                            labelFill: '#8b9baf',
                            labelFontWeight: 600,
                            labelBackground: true,
                            labelBackgroundFill: '#f8f8f8',
                            labelBackgroundOpacity: 1,
                            labelBackgroundLineWidth: 3,
                            labelBackgroundStroke: '#8b9baf',
                            labelPadding: [1, 10],
                            labelBackgroundRadius: 4,
                            router: { type: 'orth' },
                        },
                    },
                    layout: { type: 'antv-dagre' },
                    behaviors: ['zoom-canvas', 'drag-canvas', 'hover-element', 'click-select']
                })

                graph.render()
            })
        }
    }, [])
    return (
        <div style={{ height: '88vh' }} ref={ChartsBox} />
    )
};

export default GraphCharts;